<template>
	<view class="setting_main">

		<view class="return-icon-title">
			<uni-icons type="left" class="return-icon" size="25" @click="returnPreviewPage"></uni-icons>
			<text class="setting-title-text">设置</text>
		</view>

		<view class="setting-menus">
			<view class="setting_menu_item" v-for="item in settingMenuLists" :key="item.setId"
				@click="gotoSettingPage(item.setId)">
				<view class="setting-item">
					<view class="setting_menu_item_text">
						{{item.setItem}}
					</view>
					<uni-icons type="right" size="24" color="#909090"></uni-icons>
				</view>
				<divider-line :width="100" :color="'#e2e2e2'"></divider-line>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		client,
		aliossBaseUrl
	} from '@/request/alioss.js';
	import {
		dateToString
	} from '@/common/util.js';

	import {
		updateUserBg
	} from '@/request/upload.js';

	import DividerLine from '@/components/common-components/DividerLine.vue'

	export default {
		components: {
			DividerLine
		},
		data() {
			return {
				isLogin: false, // 是否登录
				settingMenuLists: [{
						setId: 1,
						setItem: '我的信息'
					},
					{
						setId: 2,
						setItem: '我的地址'
					},
					{
						setId: 3,
						setItem: '账号与安全'
					}, {
						setId: 4,
						setItem: '退出'
					},
				]
			}
		},

		onShow() {
			// 判断是否登录了
			this.checkIsLogin();
			// 如果没有登录就把设置页面的 退出 选项删了
			this.deleteExit();
		},

		methods: {

			// 判断是否登录了
			checkIsLogin() {
				this.isLogin = uni.getStorageSync("isLogin");
				if (this.isLogin != true) {
					this.isLogin = false;
				}
			},

			// 如果没有登录就把设置页面的 退出 选项删了
			deleteExit() {
				if (!this.isLogin) {
					let newArr = this.settingMenuLists.filter(item => item.setId !== 3 && item.setItem !== '退出');
					this.settingMenuLists = newArr;
				}
			},

			// 去对应设置页面
			gotoSettingPage(id) {
				// console.log(id);
				switch (id) {
					case 1:
						uni.navigateTo({
							url: '/pages/tabBar/template/personal/setpersonalInfo'
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/tabBar/template/address/addressList'
						})
						break;
					case 3:
						uni.navigateTo({
							url: '/pages/tabBar/template/setting/acountSecurity'
						})
						// uni.showToast({
						// 	title: '敬请期待',
						// 	icon: 'none'
						// })
						break;
					case 4:
						uni.showModal({
							title: "确认退出吗？",
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									});
									uni.removeStorageSync("token");
									uni.removeStorageSync("isLogin");
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})
						break;
				}
			},

			// // 从手机相册上传
			// photoUpLoad() {
			// 	uni.chooseImage({
			// 		count: 1, // 允许用户选择的图片数量，这里设置为1张
			// 		sourceType: ['album'], // 图片来源，这里只设置为相册
			// 		success: function(res) {
			// 			// console.log(res);
			// 			const fileName = 'jyapp/user/user-bg/' + uni.getStorageSync('userName') +
			// 				dateToString(new Date()) + res.tempFiles[0].name;
			// 			// 先把图片上传到阿里云
			// 			client().then(ossClient => {
			// 				return ossClient.multipartUpload(fileName, res.tempFiles[0]);
			// 			}).then(uploadAliossResult => {
			// 				// console.log("上传到阿里云oss成功");
			// 				// console.log(uploadAliossResult);
			// 				// 开始调用后端把数据库里面的用户背景地址更新
			// 				const data = {
			// 					userBg: aliossBaseUrl + fileName
			// 				}
			// 				// console.log(data);
			// 				updateUserBg(data).then(r => {
			// 					if (r.data.code === 10000) {
			// 						uni.showToast({
			// 							title: '更换成功！',
			// 							icon: 'success'
			// 						})
			// 						setTimeout(() => {
			// 							uni.switchTab({
			// 								url: '/pages/tabBar/template/template'
			// 							})
			// 						}, 500)
			// 					} else {
			// 						uni.showToast({
			// 							title: '服务器开小差啦！请稍后再试...',
			// 							icon: 'none'
			// 						})
			// 					}
			// 				}).catch(err => {
			// 					console.error(err);
			// 					uni.showToast({
			// 						title: '服务器开小差啦！请稍后再试...',
			// 						icon: 'none'
			// 					})
			// 				})
			// 			})
			// 		},
			// 		fail: function(err) {
			// 			console.log('选择图片失败：', err);
			// 		}
			// 	});
			// },

			returnPreviewPage() {
				uni.navigateBack()
			},

		}
	}
</script>

<style scoped>
	.setting_main {
		height: 100vh;
		background-color: #f8f8f8;
		padding-top: 50px;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.setting_menu_item {
		display: flex;
		flex-direction: column;
	}

	.setting-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.setting_menu_item_text {
		font-size: 17px;
		letter-spacing: 1px;
		font-family: cursive;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.ceshi {
		font-size: 80rpx;
		color: #7d537d;
	}

	.select_edit_bg_main {
		margin-top: 50rpx;
		/* font-size: 45rpx; */
		padding-left: 30rpx;
		/* color: #747474; */
	}

	.from_camera {
		margin-top: 30rpx;
	}

	.from_phone_photo {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.from_camera {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.from_phone_photo_left {
		font-size: 30rpx;
	}

	.from_phone_photo_right {
		padding-right: 20rpx;
	}

	.return-icon {
		position: absolute;
		left: 0;
		top: 10rpx;
	}

	.return-icon-title {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-bottom: 50rpx;
		position: relative;
	}


	.setting-title-text {
		font-size: 40rpx;
	}

	.setting-menus {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;
	}
</style>